﻿@page "/datagrid/keyboard-navigation"

@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.DropDowns
@using BlazorDemos
@using blazor_griddata
@inherits SampleBaseComponent;

<SampleDescription>
    <p>DataGrid functionalities can be interactive with keyboard shortcuts. In the below sample various key combinations can be used to interact with grid.</p>
</SampleDescription>
<ActionDescription>
    <i>Below key combinations can be used in grid to initiate various actions.</i>
    <ul>
        <li>
            <b>PAGER</b>
            <ul>
                <li><kbd>PageDown</kbd> -  Navigates to the next page. </li>
                <li><kbd>PageUp</kbd> - Navigates to the previous page.</li>
                <li><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>PageDown</kbd> - Navigates to the last page. </li>
                <li><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>PageUp</kbd> - Navigates to the first page. </li>
                <li><kbd>Alt</kbd> + <kbd>PageDown</kbd> -  Navigates to the last pager. </li>
                <li><kbd>Alt</kbd> + <kbd>PageUp</kbd> - Navigates to the first pager. </li>
            </ul>
        </li>
        <li>
            <b>FOCUS ELEMENTS</b>
            <ul>
                <li><kbd>Home</kbd> - Moves the focus to the first cell of the focused row. </li>
                <li><kbd>End</kbd> - Moves the focus to the last cell of the focused row. </li>
                <li><kbd>Ctrl</kbd> + <kbd>Home</kbd> - Moves the focus to the first Cell of the first row in our DataGrid component. </li>
                <li><kbd>Ctrl</kbd> + <kbd>End</kbd> - Moves the focus to the last Cell of the last row in our DataGrid component. </li>
                <li><kbd>DownArrow</kbd> - Moves the cell focus downward from the focused cell. </li>
                <li><kbd>UpArrow</kbd> - Moves the cell focus upward from the focused cell. </li>
                <li><kbd>LeftArrow</kbd> - Moves the cell focus left side from the focused cell. </li>
                <li><kbd>RightArrow</kbd> - Moves the cell focus right side from the focused cell. </li>
            </ul>
        </li>
        <li>
            <b>SELECTION</b>
            <ul>
                <li><kbd>Shift</kbd> + <kbd>DownArrow</kbd> - Extends the row/cell selection downwards from the selected row/cell.</li>
                <li><kbd>Shift</kbd> + <kbd>UpArrow</kbd> - Extends the row/cell selection upwards from the selected row/cell.</li>
                <li><kbd>Shift</kbd> + <kbd>LeftArrow</kbd> - Extends the cell selection to the left side from the selected cell.</li>
                <li><kbd>Shift</kbd> + <kbd>RightArrow</kbd> - Extends the cell selection to the right side from the selected cell.</li>
                <li><kbd>Shift</kbd> + <kbd>Enter</kbd> - Moves the row/cell selection downward from the selected row. </li>
                <li><kbd>UpArrow</kbd> - Moves the row/cell selection upward from the selected row. </li>
                <li><kbd>Tab</kbd> - Moves the cell selection right side from the selected cell.</li>
                <li><kbd>Shift</kbd> + <kbd>Tab</kbd> - Moves the cell selection left side from the selected cell. </li>
                <li><kbd>Esc</kbd> - Deselects all the selected row/cells. </li>
                <li><kbd>Ctrl</kbd> + <kbd>A</kbd> - Selects all the row/cells in the current page.</li>
                <li><kbd>UpArrow</kbd> - Moves up a row/cell selection from the selected row/cell.</li>
                <li><kbd>DownArrow</kbd> - Moves down a row/cell selection from the selected row/cell. </li>
                <li><kbd>RightArrow</kbd> - Moves to the right cell selection from the selected cell.</li>
                <li><kbd>LeftArrow</kbd> - Moves to the left cell selection from the selected cell. </li>
            </ul>
        </li>
        <li>
            <b>EDITING</b>
            <ul>
                <li><kbd>F2</kbd> -  Starts editing of selected row if Mode is Normal or Dialog / Starts editing of selected cell if Mode is Batch. </li>
                <li><kbd>Esc</kbd> - Cancels the editing of the particular row/cell. </li>
                <li><kbd>Delete</kbd> - Deletes the current selected record.</li>
                <li><kbd>Insert</kbd> - Creates a new add form depending on the NewRowPosition. </li>
                <li><kbd>Tab</kbd> - Navigates to the next editable cell if the Mode is Normal or Dialog / Saves the current cell and starts editing the next cell if Mode is Batch.</li>
                <li><kbd>ShiftTab</kbd> - Navigates to the previous editable cell if the Mode is Normal or Dialog / Saves the current cell and starts editing the previous cell if Mode is Batch.</li>
                <li><kbd>Enter</kbd> - Saves the current form if the Mode is Normal or Dialog /  Saves the current cell and starts editing the next row cell if Mode is Batch.</li>
                <li><kbd>ShiftEnter</kbd> - Saves the current cell and starts editing the previous row cell if Mode is Batch.</li>
            </ul>
        </li>
        <li>
            <b>GROUPING</b>
            <ul>
                <li><kbd>Alt</kbd> + <kbd>DownArrow</kbd> -  Expands the Selected Grouped Cell. </li>
                <li><kbd>Ctrl</kbd> + <kbd>DownArrow</kbd> - Expands all the Visible Group. </li>
                <li><kbd>Alt</kbd> + <kbd>UpArrow</kbd> - Collapses the selected group.</li>
                <li><kbd>Ctrl</kbd> + <kbd>UpArrow</kbd> - Collapses all the visible groups.</li>
            </ul>
        </li>
        <li>
            <b>COPY</b>
            <ul>
                <li><kbd>Ctrl</kbd> + <kbd>C</kbd> -  Copy selected rows or cells data into clipboard.</li>
                <li><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>H</kbd> - Copy selected rows or cells data with header into clipboard.</li>
            </ul>
        </li>
        <li>
            <b>PRINT</b>
            <ul>
                <li><kbd>Ctrl</kbd> + <kbd>P</kbd> - Prints the DataGrid.</li>
            </ul>
        </li>
    </ul>
</ActionDescription>


<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">

            <SfGrid DataSource="@GridData" AllowGrouping="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" AllowPaging="true">
                <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true"></GridEditSettings>
                <GridSelectionSettings Type="SelectionType.Multiple" Mode="Syncfusion.Blazor.Grids.SelectionMode.Cell"></GridSelectionSettings>
                <GridColumns>
                    <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" IsPrimaryKey="true" ValidationRules="@(new ValidationRules{ Required=true, Number=true})" TextAlign="TextAlign.Right" Width="140"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" ValidationRules="@(new ValidationRules{ Required=true})" Width="150">
                        <EditTemplate>
                            <SfAutoComplete TItem="OrdersDetails" TValue="string" ID="CustomerID" @bind-Value="@((context as OrdersDetails).CustomerID)" DataSource="@GridData">
                                <AutoCompleteFieldSettings Value="CustomerID"></AutoCompleteFieldSettings>
                            </SfAutoComplete>
                        </EditTemplate>
                    </GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" ValidationRules="@(new ValidationRules{ Required=true, Range = new double[]{1, 1000}})" EditType="EditType.NumericEdit" Format="C2" TextAlign="TextAlign.Right" Width="140"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText="Order Date" EditType="EditType.DatePickerEdit" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="160"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150"></GridColumn>
                </GridColumns>
            </SfGrid>

        </div>
    </div>
</div>

@code{

    public List<OrdersDetails> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = OrdersDetails.GetAllRecords();
    }
}

